<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP</title>
    <style>
        .container {
            margin: 100px;
        }
        .ball { 
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }

        .gasp__container {
            margin: 100px 300px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }
        .box {
            border: 1px dashed #f36;
            width: 20vh;
            height: 20vh;
        }
        .item {
            width: 100%;
            height: 100%;
            background-color: #f36;
        }
        .circle, .square {
            height: 80px;
            width: 80px;
            border-radius: 50%;
            background: #f36;
            box-shadow: inset -10px -10px 10px rgba(0, 0, 0, 0.6);
            margin: auto;
        }

        .square {
            background-color: #f90;
            border-radius: 10px;
        }
        .dot { 
            display: inline-block;
            margin-right: 20px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
        } 
        .dot:nth-child(1) { 
            background-color: red;
        } 
        .dot:nth-child(2) { 
            background-color: blue;
        } 
        .dot:nth-child(3) { 
            background-color: green;
        }
        .wrapper {
            margin-top: 100px;
            width: 75%;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        .boxes {
            height: 50%;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            background: #2d2d2d;
        }

        .box {
            width: 80px;
            height: 80px;
            font-size: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/face-bg.svg);
        }

        .blue {
            background-color: #6699fc;
        }

        .pink {
            background-color: #f69;
        }

        .yellow {
            background-color: #ffcc33;
        }
        .box {
            margin: 100px 10px;
        }
        .nav {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        button{
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <!-- 球 -->
    <!-- <div class="container">
        <img class="ball" src="./ball.jpeg"/>
        <div><button id="play">PLAY</button></div>
    </div> -->

    <!-- 连接动画 -->
    <!-- <div class="gasp__container">
        <div class="box">
            <div class="item"></div>
        </div>
    </div>
    <div><button id="play">PLAY</button></div> -->

    <!-- set -->
    <!-- <div class="container">
        <div class="circle"></div>
        <div class="square"></div>
    </div>
    <div><button id="play">PLAY</button></div> -->

    <!-- timeline -->
    <!-- <div class="container"> 
        <div class="dot dot1"></div> 
        <div class="dot dot2"></div> 
        <div class="dot dot3"></div> 
    </div> -->
    <!-- <div class="wrapper">
        <div class="boxes">
            <div class="box blue"></div>
            <div class="box pink"></div>
            <div class="box yellow"></div>
        </div>
    </div> -->

    <!-- 控制 -->
    <!-- <div class="box green"></div>
    <div class="nav">
        <button id="play">play</button>
        <button id="pause">pause</button>
        <button id="resume">resume</button>
        <button id="reverse">reverse</button>
        <button id="restart">restart</button>
    </div> -->

    <!-- ease -->
    <img id="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/logo-man.svg" />
    <div class="nav">
        <button id="bounce">bounce</button>
        <button id="linear">linear</button>
        <button id="elastic">elastic</button>
        <button id="circ">circ</button>
        <button id="expo">expo</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>
    <script>
        const handlePlay = document.getElementById("play"); 
        //defaults
        // gsap.defaults({ 
        //     ease: "power2.in", 
        //     duration: 1 
        // });

        //config
        // gsap.config({ 
        //     autoSleep: 60, 
        //     force3D: true, 
        //     nullTargetWarn: false, 
        //     units: { 
        //         x: "vw", 
        //         y: "vh" 
        //     } 
        // });

        // to~~~~~~~~~~~
        // const tween = gsap.to(".ball", { 
        //     duration: 2, 
        //     x: 200, 
        //     scale: 2, 
        //     paused: true 
        // }); 

        // from~~~~~~~~~
        // const tween = gsap.from(".ball", { 
        //     duration: 2, 
        //     x: "-100vw", 
        //     visibility: "visible", 
        //     paused: true 
        // });
        
        // from to~~~~~~
        // const tween = gsap.from(".item", { 
        //     opacity: 1, 
        //     x: 10, 
        //     y: -50, 
        //     rotate: 45, 
        //     duration: 1, 
        //     paused: true 
        // }); 
        // const tween2 = gsap.to(".item", { 
        //     opacity: 1, 
        //     x: -200, 
        //     y: 0, 
        //     rotate: 0, 
        //     borderRadius: "50%", 
        //     backgroundColor: "rgb(42 173 210)", 
        //     duration: 4, 
        //     delay: 1, 
        //     paused: true 
        // });

        //fromTo
        // const tween = gsap.fromTo(".item", { 
        //     opacity: 1, 
        //     x: 10, 
        //     y: -50, 
        //     rotate: 45 
        // }, { 
        //     opacity: 1, 
        //     x: -200, 
        //     y: 0, 
        //     rotate: 0, 
        //     borderRadius: "50%", 
        //     backgroundColor: "rgb(42 173 210)", 
        //     duration: 4, 
        //     paused: true 
        // });

        //set
        // const tween = gsap.set(".circle", {
        //     x: 100,
        //     y: 50,
        //     opacity: 0.5,
        //     paused: true
        // });

        // const tween2 = gsap.to(".square", {
        //     duration: 0,
        //     x: 100,
        //     y: 50,
        //     opacity: 0.5,
        //     paused: true
        // });

        //timeline position 
        // gsap.to(".dot1", {
        //     y: -100, 
        //     duration: 1
        // }); 
        // gsap.to(".dot2", {
        //     y: -100, 
        //     duration: 1, 
        //     delay: 1
        // }); 
        // gsap.to(".dot3", {
        //     y: -100, 
        //     duration: 1, 
        //     delay: 2
        // });
        // const blue = document.querySelector(".blue"); 
        // const pink = document.querySelector(".pink"); 
        // const yellow = document.querySelector(".yellow");
        // const tl = gsap.timeline(); 
        // tl.to(yellow, { scale: 1 })
        // .to(yellow, { rotation: 360 }) 
        // .to(yellow, { scale: 0.5 })
        // .to(blue, { scale: 2 }) 
        // .to(blue, { rotation: 360 }) 
        // .to(blue, { scale: 1 }) 
        // .to(pink, { y: -50 }) 
        // .to(pink, { rotation: 360 }) 
        // .to(pink, { y: 0 }) 
         
        
        // handlePlay.addEventListener("click", () => {
        //     tween.play();
        //     tween2.play();
        //     // tween3.play();
        // });

        //控制
        // const tween = gsap.to(".green", {
        //     duration: 4, 
        //     x: 750, 
        //     rotation: 360, 
        //     borderRadius: '50%',
        //     backgroundColor: '#f36',
        //     boxShadow: '0 0 10px 20px #f90',
        //     ease: "none", 
        //     paused: true
        // });
        // document.querySelector("#play").addEventListener('click', () => tween.play()) 
        // document.querySelector("#pause").addEventListener('click', () => tween.pause());
        // document.querySelector("#resume").addEventListener('click', () => tween.resume());
        // document.querySelector("#reverse").addEventListener('click', () => tween.reverse());
        // document.querySelector("#restart").addEventListener('click', () => tween.restart());

        //ease
        document.querySelector("#bounce").addEventListener("click", () => {
            gsap.to("#logo", { duration: 1, y: 100, scale: 0.5, ease: "bounce" });
        });
        document.querySelector("#linear").addEventListener("click", () => {
            gsap.to("#logo", { duration: 1, x: 100, scale: 0.8, ease: "linear" });
        });
        document.querySelector("#elastic").addEventListener("click", () => {
            gsap.to("#logo", {
                duration: 1,
                y: 100,
                x: 30,
                scale: 0.5,
                ease: "elastic.out(1, 0.3)"
            });
        });
        document.querySelector("#circ").addEventListener("click", () => {
            gsap.to("#logo", { duration: 1, y: 100, scale: 1.2, ease: "circ.out" });
        });
        document.querySelector("#expo").addEventListener("click", () => {
            gsap.to("#logo", {
                duration: 1,
                y: 100,
                x: 100,
                scale: 0.5,
                ease: "expo.out"
            });
        });
    </script>
</body>
</html>